<template>
  <view class="findCaseDetails" v-if="casedetail">
    <view class="cover" v-if="casedetail.imgsLb">
      <up-swiper
        v-if="showImg && casedetail.imgsLb"
        :list="casedetail.imgsLb"
        @change="(e) => (currentNum = e.current)"
        :autoplay="false"
        :height="'750rpx'"
        indicatorStyle="right: 20px"
        :img-mode="'aspectFit'"
      >
      </up-swiper>
      <view class="item3D" v-if="!showImg"> </view>
      <view class="indicator-num">
        <view
          class="indicator-num__text"
          @tap="showImg = true"
          :class="showImg ? 'active' : ''"
        >
          图集{{ currentNum + 1 }}/{{ casedetail.imgsLb.length }}</view
        >
        <!-- <view class="indicator-num__text " @tap="showImg = false" :class='showImg?"":"active"'>3D模型图</view> -->
      </view>
    </view>

    <view class="conterRow">
      <view class="info">
        <view class="price" v-if="casedetail.subsidy?.activity_id">
          <text class="unit" style="color: #df3033">¥</text>
          <view class="priceFlow1" style="color: #df3033">{{
            casedetail.subsidy?.price.split(".")[0]
          }}</view>
          <view
            class="priceHou1"
            style="color: #df3033"
            v-if="casedetail.subsidy?.price.includes('.')"
            >.{{ casedetail.subsidy?.price.split(".")[1] }}</view
          >
          <text class="img">到手价</text>
          <text class="old">{{ casedetail.price }}</text>
        </view>
        <view class="price" v-if="!casedetail.subsidy?.activity_id">
          <text class="unit">¥</text>
          <view class="priceFlow1">{{ casedetail.price.split(".")[0] }}</view>
          <view class="priceHou1" v-if="casedetail.price.includes('.')"
            >.{{ casedetail.price.split(".")[1] }}</view
          >
        </view>
        <!-- <view class="qvan">
					<text class="qvanItem" v-for="i in 4">满500减30</text>
				</view> -->
        <view class="title">
          <text class="ccc"
            ><text class="tig" v-if="casedetail.subsidy?.activity_id"
              >平台补贴</text
            >{{ info.title }}{{ casedetail.name }}</text
          >
        </view>
        <view class="flex_row_btw_center tiaoli" @tap="handleShowShop">
          <view class="flex_row_start_center">
            <view class="name"> 规格 </view>
            <view class="value" style="width:calc(100% - 90rpx)"
              >已选<text> ： {{ casedetail.name }}</text></view
            >
          </view>
          <view>
            <up-icon name="arrow-right" color="#999" size="18"></up-icon>
          </view>
        </view>
        <view class="flex_row_btw_center tiaoli addLine" @tap="handleShowAttr">
          <view class="flex_row_start_center">
            <view class="name"> 参数 </view>
            <view class="value" style="width:calc(100% - 90rpx)">材质尺寸、包装、组装说明等</view>
          </view>
          <view>
            <up-icon name="arrow-right" color="#999" size="18"></up-icon>
          </view>
        </view>
        <view
          class="caseimage"
          v-if="casedetail.contentP && casedetail.contentP.length > 0"
        >
          <text style="padding-bottom: 18rpx; display: block">详情</text>
          <view
            v-for="item2 in casedetail.contentP"
            :key="item2.id"
            class="for"
          >
            <view class="case_tuzi">
              <up-lazy-load :image="item2"></up-lazy-load>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="bottomFexBtn">
        <view class="rowConter">
          <!-- <view class="row">
						<view class="icon" @click="nullClick">
							<view class="iconRow">
								<image src="../../../static/home/sc.png"> </image>
							</view>
							<text style="color: #fff;">收藏</text>
						</view>
					</view> -->
          <view class="row">
            <view class="icon">
              <view class="iconRow">
                <image src="../../../static/home/fx.png"> </image>
              </view>
              <text>分享</text>

              <button open-type="share" class="shareBtn">分享</button>
            </view>
          </view>
          <view class="row">
            <view class="icon">
              <view class="iconRow" style="opacity: 0">
                <image src="../../../static/home/sc.png"> </image>
              </view>
              <text style="color: #fff; opacity: 0">收藏</text>
            </view>
          </view>
          <view class="row">
            <view class="btns" @click="addCard" v-if="casedetail.stock > 0">
              加入购物车
            </view>
            <view class="btnsNo" @click="addCardNo" v-else> 加入购物车 </view>
          </view>
          <view class="row">
            <view class="btn" @click="buyNow('1')" v-if="casedetail.stock > 0">
              立即购买
            </view>
            <view class="btnNo" @click="addCardNo" v-else> 立即购买 </view>
          </view>
        </view>
      </view>
    </view>
    <up-popup
      :show="showShop"
      :round="10"
      mode="bottom"
      @close="close"
      @open="open"
    >
      <view class="popShop">
        <view class="top flex_row_btw_top">
          <view class="left flex_row_start_center">
            <view class="img">
              <image :src="casedetail.img"> </image>
            </view>
            <view class="flex-column-between-between">
              <view class="price" v-if="casedetail.subsidy?.activity_id">
                <text class="unit" style="color: #df3033">¥</text>
                <view class="priceFlow1" style="color: #df3033">{{
                  casedetail.subsidy?.price.split(".")[0]
                }}</view>
                <view
                  class="priceHou1"
                  style="color: #df3033"
                  v-if="casedetail.subsidy?.price.includes('.')"
                  >.{{ casedetail.subsidy?.price.split(".")[1] }}</view
                >
                <text class="priceType">到手价</text>
                <text class="old">{{ casedetail.price }}</text>
              </view>
              <view class="price" v-if="!casedetail.subsidy?.activity_id">
                <text class="unit">¥</text>
                <view class="priceFlow1">{{
                  casedetail.price.split(".")[0]
                }}</view>
                <view class="priceHou1" v-if="casedetail.price.includes('.')"
                  >.{{ casedetail.price.split(".")[1] }}</view
                >
              </view>
              <view
                class="title"
                style="
                  display: flex;
                  justify-content: flex-start;
                  align-items: flex-start;
                  width: 100%;
                  margin-left: 40rpx;
                  margin-top: 16rpx;
                "
              >
                <text class="tig" v-if="casedetail.subsidy?.activity_id"
                  >平台补贴</text
                >
                <text></text>
              </view>
              <view
                class="title"
                style="
                  display: flex;
                  justify-content: flex-start;
                  align-items: flex-start;
                  width: 100%;
                  margin-left: 40rpx;
                "
              >
                <text  v-if="!casedetail.subsidy?.activity_id"
                  style="color:#fff">平台补贴</text
                >
                <text></text>
              </view>
              <!-- <view class="price flex_row_btw_center">
								<view class="unit">
									¥
								</view>
								<view class="value" v-if="casedetail.subsidy?.activity_id">
									{{casedetail.subsidy?.price}}
								</view>
								<view class="value" v-if="!casedetail.subsidy?.activity_id">
									{{casedetail.price}}
								</view>
							</view> -->

              <view
                style="
                  margin-top: 26rpx;
                  margin-left: 40rpx;
                  width: 100%;
                "
              >
                <view class="editNumber flex" v-if="casedetail.stock > 0">
                  <up-number-box
                    v-model="goodsNum"
                    @change="valChange"
                    :min="1"
                    :max="casedetail.stock"
                    integer
                  ></up-number-box>
                </view>
                <text v-else class="no">无货</text>
              </view>
            </view>
          </view>
          <view class="close">
            <up-icon name="close" color="#000" size="16" @tap="close"></up-icon>
          </view>
        </view>
        <view class="main" v-if="info.sku && info.sku.length > 0">
          <view class="title"> 规格 </view>
          <view class="items" v-for="(sku, skuIndex) in info.sku">
            <view
              class="item"
              :class="sku.id == skuId ? 'actives' : ''"
              v-if="sku.audit_status == 1"
              @tap="changeSku(sku.id)"
            >
              <view class="flex_row_start_center">
                <view class="img">
                  <img :src="sku.img" alt="" />
                </view>
                <text style="width:calc(100% - 90rpx)">{{ sku.name }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="bottom" v-if="casedetail.stock > 0">
          <view class="flex-row-center-center">
            <view class="btns" @click="addCard" v-if="btnType == '1'">
              加入购物车
            </view>
            <view class="btn" @click="buyNow('2')" v-if="btnType == '1'">
              立即购买
            </view>
            <view class="btn1" @click="buy" v-if="btnType == '2'"> 确定 </view>
          </view>
        </view>
        <view class="bottom" v-else>
          <view class="flex-row-center-center">
            <view class="btnsNo" @click="addCardNo" v-if="btnType == '1'">
              加入购物车
            </view>
            <view class="btnNo" @click="addCardNo" v-if="btnType == '1'">
              立即购买
            </view>
            <view class="btn1No" @click="addCardNo" v-if="btnType == '2'">
              确定
            </view>
          </view>
        </view>
      </view>
    </up-popup>

    <up-popup
      :show="showAttr"
      :round="10"
      mode="bottom"
      @close="showAttr = false"
      @open="showAttr = true"
    >
      <view class="popShop">
        <view class="top flex_row_btw_top">
          <view class="left flex_row_start_center">
            <text style="color: #fff">暂未</text>
          </view>
          <view class="close">
            <up-icon
              name="close"
              color="#000"
              size="16"
              @tap="showAttr = false"
            ></up-icon>
          </view>
        </view>
        <view class="main" style="margin-top: 25rpx">
          <view class="flex-row-center-center">
            <view
              class="list flex-column-between-between"
              v-for="(ite, i) in casedetail.size"
            >
              <text class="name">{{ ite.attr_name }}</text>
              <text class="value">{{ ite.value }}{{ ite.unit }}</text>
            </view>
          </view>
          <view class="box">
            <view
              class="flex_row_btw_center attr"
              v-for="(its, is) in casedetail.attr"
            >
              <view class="name">
                {{ its.attr_name }}
              </view>
              <text class="value" v-if="its.attr_type != 'select_color'">{{
                its.value
              }}</text>
              <view class="valueImg" v-if="its.attr_type == 'select_color'">
                <image class="img" :src="it1" v-for="(it1, is) in its.value">
                </image>
              </view>
            </view>
            <view
              class="flex_row_btw_center attr"
              v-for="(its, is) in casedetail.child_attr"
            >
              <view class="name">
                {{ its.attr_name }}
              </view>
              <text class="value" v-if="its.attr_type != 'select_color'">{{
                its.value
              }}</text>
              <view class="valueImg" v-if="its.attr_type == 'select_color'">
                <image class="img" :src="it1" v-for="(it1, is) in its.value">
                </image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </up-popup>

    <up-popup
      :show="showTel"
      :round="10"
      mode="bottom"
      @close="showTel = false"
      @open="showTel = true"
    >
      <bindTel @closeModel="showTel = false"/>
      <!-- <bindTel @closeModel="showTel = false" @saveModel='buySave'/> -->
    </up-popup>

    <!-- <up-popup
      :show="showGetTel"
      :round="10"
      mode="bottom"
      @close="showGetTel = false"
      @open="showGetTel = true"
      :closeOnClickOverlay="false"
    >
      <getTel @closeModel="showGetTel = false" />
    </up-popup> -->
  </view>
</template>

<script setup>
import { checkLogin } from '@/utils/auth.js';
import { detailsData, addCar } from "@/api/homeFurnishings.js";
import bindTel from "@/components/bindTel.vue";
// import getTel from "@/components/getTel.vue";
import { ref, onMounted, defineExpose, watch, reactive } from "vue";
import {
  onLoad,
  onReady,
  onShow,
  onHide,
  onShareAppMessage,
  onShareTimeline,
} from "@dcloudio/uni-app";
const currentNum = ref(0);
const showImg = ref(true);
const id = ref(null);
const skuId = ref("");
const casedetail = ref({});
const goodsNum = ref(1);
const showTel = ref(false);
const showGetTel = ref(false);
onLoad((option) => {
  wx.showShareMenu({
    withShareTicket: true,
    menus: ["shareAppMessage", "shareTimeline"],
  });
  if (option.id) {
    id.value = option.id;
    skuId.value = option.skuId;
  }
  // if (uni.getStorageSync("useInfo").phone == "") {
  //   showGetTel.value = true;
  // }
 
});
onHide(() => {
  console.log("消失了");
  uni.setStorageSync("isShare", "1");
  
});
onShow(() => {
  queryDetails();
});
//发送给朋友
onShareAppMessage((res) => {
  console.log("发送给朋友发送给朋友", res);

  if (casedetail.value) {
    uni.setStorageSync("isShare", "1");
    const url =
      "/pages/find/homeFurnish/index?share=1&id=" +
      id.value +
      "&skuId=" +
      skuId.value; //你的转发页面路径拼接参数
    console.log("url", url);
    return {
      title: casedetail.value.name,
      type: 0,
      path: url,
      imageUrl: casedetail.value.img,
    };
  }
});

//分享到朋友圈
onShareTimeline((res) => {
  console.log("分享到朋友圈");
  if (casedetail.value) {
    //   uni.setStorageSync("isShare", "1");
    const url = "/pages/find/homeFurnish/index?share=1"; //你的转发页面路径拼接参数
    console.log("url", url);
    return {
      title: casedetail.value.name,
      type: 0,
      path: url,
      imageUrl: casedetail.value.img,
      query: {
        id: id.value,
        skuId: skuId.value,
        // share: '1' // 确保 share=1 存在
      },
    };
  }
});

const showShop = ref(false);
//规格点击事件
//设置显示按钮
const btnType = ref("1");
const handleShowShop = () => {
  showShop.value = true;
  btnType.value = "1";
  goodsNum.value = 1;
};
const close = () => {
  showShop.value = false;
};
const open = () => {
  showShop.value = true;
  goodsNum.value = 1;
};
//立即购买
// 支付跳转参数
const payParams = ref({
  // ids: '',
  token: "",
  buy: [],
  source: 3, //来源:1=购物车,2=报价单,3=直接购买
});
const typeCode = ref()
const buyNow = (code) => {
	typeCode.value = code
  if (!checkLogin()) {
    return;
  }
  if (uni.getStorageSync("useInfo").allin_mobile == 0) {
    showTel.value = true;
  } else {
    if (code == 1) {
      showShop.value = true;
      goodsNum.value = 1;
      btnType.value = "2";
    } else {
      showShop.value = false;
      console.log("购买的子商品信息", skuId.value, goodsNum.value);
      goPay();
    }
  }
};

const buySave = ()=>{
	showTel.value = false;
	if (typeCode.value == 1) {
	  showShop.value = true;
	  goodsNum.value = 1;
	  btnType.value = "2";
	} else {
	  showShop.value = false;
	  console.log("购买的子商品信息", skuId.value, goodsNum.value);
	  goPay();
	}
}

//购买跳转并关闭弹窗
const buy = () => {
  showShop.value = false;
  console.log("购买的子商品信息", skuId.value, goodsNum.value);
  goPay();
};
//去支付
const goPay = () => {
  // 已登录
  const token = uni.getStorageSync("token");
  payParams.value.token = token;
  let obj = [
    {
      sku_id: skuId.value,
      num: goodsNum.value,
    },
  ];
  payParams.value.buy = JSON.stringify(obj);
  uni.setStorageSync("payParams", ""); //清空之前才储存的支付参数
  uni.setStorageSync("payParams", payParams.value);
  uni.navigateTo({
    url: "/pages/order/confirmOrder/index",
  });
};
const showAttr = ref(false);
//参数点击事件
const handleShowAttr = () => {
  showAttr.value = true;
};
const nullClick = () => {
  wx.showToast({
    title: "正在开发中！",
    icon: "none",
    duration: 2000,
  });
};

//加入购物车
const addCard = async () => {
  if (!checkLogin()) {
    return;
  }
  let goods = [
    {
      sku_id: skuId.value,
      num: goodsNum.value,
    },
  ];
  const res = await addCar({
    goods: JSON.stringify(goods),
  });
  if (res.code === 1) {
    wx.showToast({
      title: res.msg,
      icon: "none",
      duration: 2000,
    });
  }
  showShop.value = false;
  goodsNum.value = 1;
};

const addCardNo = () => {
  wx.showToast({
    title: "暂时无货，已告知商家尽快补货，请稍后再试！",
    icon: "none",
    duration: 2000,
  });
};
// 详情数据
const info = ref();
const fuImgs = ref([]);
const queryDetails = async () => {
  const res = await detailsData({
    id: id.value,
  });
  if (res.code === 1) {
    fuImgs.value = JSON.parse(JSON.stringify(res.data.row.imgs));
    info.value = JSON.parse(JSON.stringify(res.data.row));
    setInfo();
  }
};
//设置页面展示格式
const setInfo = () => {
  let skuLb = "";
  casedetail.value = info.value.sku.filter((item) => {
    if (item.id == skuId.value) {
      item.imgsLb = [];
      if (item.id == skuId.value) {
        skuLb = item.img;
      }
      item.imgsLb = [...info.value.imgs];
      item.imgsLb.unshift(skuLb);
      item.contentP = [...info.value.content];
      return item;
    }
  })[0];
};
//更改选中的子商品
const changeSku = (id) => {
  skuId.value = id;
  casedetail.value = "";
  setInfo();
};
</script>

<style scoped lang="less">
.findCaseDetails {
  width: 100%;

  .cover {
    height: 750rpx;
    width: 100%;
    position: relative;

    .item3D {
      height: 750rpx;
      width: 100%;
      background-color: #fff;
    }
  }

  .conterRow {
    min-height: calc(100vh - 400rpx);
    padding: 30rpx;
    position: relative;
    box-sizing: border-box;
    background-color: #ffffff;

    .info {
      padding-bottom: 15rpx;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      box-sizing: border-box;

      .price {
        // width: 100%;
        // font-family: Source Han Sans CN, Source Han Sans CN;
        // font-weight: 400;
        // font-size: 24rpx;
        // color: #000000;
        // line-height: 34rpx;
        // text-align: left;
        // font-style: normal;
        // text-transform: none;
        // margin: 8rpx 0;
        // display: flex;
        // align-items: center;
        // height: 34rpx;
        width: 100%;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 24rpx;
        color: #000000;
        line-height: 34rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin: 8rpx 0;
        display: flex;
        align-items: center;
        height: 34rpx;
        .new {
          font-weight: 500;
          font-size: 45rpx;
          color: #e42f2f;
          line-height: 34rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .old {
          font-weight: 400;
          font-size: 24rpx;
          color: #777777;
          line-height: 34rpx;
          text-align: left;
          font-style: normal;
          text-decoration-line: line-through;
          text-transform: none;
          margin-left: 12rpx;
          height: 32rpx;
        }

        .img {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #df3033;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
          margin-left: 5rpx;
          height: 37rpx;
        }

        .unit {
          font-weight: 500;
          font-size: 30rpx;
          color: #333;
          height: 32.5rpx;
        }
      }

      .title {
        width: 100%;
        margin-top: 5rpx;
        letter-spacing: 0.5px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        line-height: 1.5;
        text-align: left;
        font-style: normal;
        text-transform: none;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        border-bottom: 1rpx solid #e4e4e4;
        padding-bottom: 30rpx;
        .tig {
          font-weight: 400;
          font-size: 22rpx;
          color: #ffffff;
          width: 100rpx;
          display: inline-block;
          height: 34rpx;
          text-align: center;
          line-height: 34rpx;
          background: linear-gradient(90deg, #fc585b 0%, #ee3939 100%);
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          margin-right: 4rpx;
        }

        .ccc {
          width: 100%;
          text-overflow: ellipsis;
          white-space: normal;
          word-wrap: break-word;
          display: block;
          margin-top: 10rpx;
          font-size: 30rpx;
        }
      }

      .qvan {
        margin-top: 22rpx;

        width: 90%;
        display: flex;
        flex-direction: row;
        column-gap: 6rpx;
        align-items: center;
        overflow-y: auto;

        .qvanItem {
          height: 30rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #ff3e3e;
          line-height: 30rpx;
          padding: 0 7rpx;
          background: rgba(255, 255, 255, 0.4);
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          border: 1rpx solid #ff8383;
          white-space: nowrap;
          /* 新增：防止文字换行 */
          flex-shrink: 0;
          /* 新增：防止子元素缩小 */
        }
      }

      .tiaoli {
        width: 100%;
        margin-top: 45rpx;

        .name {
          font-weight: 400;
          font-size: 26rpx;
          color: #666666;
          width: 90rpx;
        }

        .value {
          font-weight: 400;
          font-size: 26rpx;
          color: #333333;
          margin-left: 33rpx;
        }
      }

      .addLine {
        padding-bottom: 45rpx;
        border-bottom: 1rpx solid #e4e4e4;
      }

      .caseimage {
        width: 100%;
        padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
        box-sizing: border-box;
        margin-top: 38rpx;

        .for {
          width: 100%;
        }

        text {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        image {
          width: 100%;
        }
      }
    }

    .bottomFexBtn {
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 5;
      padding-bottom: env(safe-area-inset-bottom);
      padding-bottom: constant(safe-area-inset-bottom);
      height: calc(120rpx + env(safe-area-inset-bottom));
      height: calc(120rpx + constant(safe-area-inset-bottom));
      width: 100%;
      // background-color: #000000 !important;
      backdrop-filter: blur(10px) !important;
      background-color: rgba(255, 255, 255, 0.82) !important;
      box-shadow: 0rpx -4rpx 6rpx 0rpx rgba(0, 0, 0, 0.05);
      box-sizing: border-box;
      display: flex;
      align-items: flex-start;

      .rowConter {
        padding: 15rpx 25rpx;
        width: 100%;
        display: flex;
        align-items: center;

        .row {
          display: flex;
          justify-content: center;
          align-items: center;

          .icon {
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            position: relative;

            .shareBtn {
              // border: 1px solid red;
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
            }

            .iconRow {
              width: 100%;
              display: flex;
              justify-content: center;
              margin-bottom: 5rpx;
              width: 50rpx;

              image {
                width: 50rpx;
                height: 50rpx;
              }
            }

            text {
              display: block;
              width: 50rpx;
              text-align: center;
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 400;
              font-size: 20rpx;
              color: #666666;
              line-height: 40rpx;
              font-style: normal;
              text-transform: none;
            }
          }

          .btn {
            width: 258rpx;
            height: 80rpx;
            background: linear-gradient(113deg, #f2bd6f 0%, #cca05f 100%);
            border-top-right-radius: 20rpx;
            border-bottom-right-radius: 20rpx;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            font-size: 32rpx;
            color: #ffffff;
            line-height: 80rpx;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }

          .btns {
            width: 258rpx;
            height: 80rpx;
            background: rgba(213, 169, 105, 0.2);
            border-top-left-radius: 20rpx;
            border-bottom-left-radius: 20rpx;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            font-size: 30rpx;
            color: #d5a969;
            line-height: 80rpx;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }
          .btnNo {
            width: 258rpx;
            height: 80rpx;
            background: #afafaf;
            border-top-right-radius: 20rpx;
            border-bottom-right-radius: 20rpx;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            font-size: 32rpx;
            color: #ffffff;
            line-height: 80rpx;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }

          .btnsNo {
            width: 258rpx;
            height: 80rpx;
            background: #c9c9c9;
            border-top-left-radius: 20rpx;
            border-bottom-left-radius: 20rpx;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            font-size: 30rpx;
            color: #fff;
            line-height: 80rpx;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }
        }
      }
    }
  }
}

.indicator-num {
  display: flex;
  justify-content: center;
  height: 50rpx;
  background: rgba(56, 56, 56, 0.5) !important;
  border-radius: 4rpx 4rpx 4rpx 4rpx;
  position: absolute;
  bottom: 24rpx;
  right: 30rpx;
  display: flex;
  align-items: center;
  padding-left: 5rpx;
  padding-right: 5rpx;

  &__text {
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
    height: 40rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    line-height: 40rpx;
  }

  .active {
    font-weight: 500;
    font-size: 24rpx !important;
    color: #ffffff !important;
    height: 40rpx !important;
    padding-left: 20rpx !important;
    padding-right: 20rpx !important;
    line-height: 40rpx !important;
    background: rgba(56, 56, 56, 0.5) !important;
    border-radius: 4rpx 4rpx 4rpx 4rpx !important;
  }
}
.editNumber {
  width: 160rpx;
  height: 50rpx;
  align-items: center;
  border-radius: 10rpx;
  border: 1px solid #eee9e9;
  box-sizing: border-box;

  ::v-deep .u-number-box {
    display: flex;
    box-sizing: border-box;
  }

  ::v-deep .u-number-box__minus,
  ::v-deep .u-number-box__plus {
    padding: 5rpx;
    background-color: transparent !important;
    box-sizing: border-box;
    height: 30rpx !important;
    width: 35rpx;

    text {
      font-size: 16rpx !important;
    }
  }

  ::v-deep .u-number-box__input {
    background-color: transparent !important;
    height: 30rpx !important;
    width: 35rpx;
    border-left: 1rpx solid #eee9e9;
    border-right: 1rpx solid #eee9e9;
  }
}
.popShop {
  padding: 30rpx 30rpx 45rpx;

  .top {
    .left {
      .img {
        width: 170rpx;
        height: 170rpx;
        background: #f7f7f7;
        border-radius: 10rpx 10rpx 10rpx 10rpx;
      }

      .tig {
        font-weight: 400;
        font-size: 22rpx;
        color: #ffffff;
        width: 100rpx;
        display: inline-block;
        height: 34rpx;
        text-align: center;
        line-height: 34rpx;
        background: linear-gradient(90deg, #fc585b 0%, #ee3939 100%);
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        margin-right: 4rpx;
      }

      .price {
        padding-left: 30rpx;
        // font-weight: 500;
        // font-size: 34rpx;
        // color: #333333;
        // display: flex;
        // // justify-content: flex-end;
        // align-items: center;
        // flex-direction: row;
        // height: 45rpx;
        // margin-bottom: 10rpx;
        width: 100%;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 24rpx;
        color: #000000;
        line-height: 34rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin: 8rpx 0;
        display: flex;
        align-items: center;
        height: 34rpx;
        .unit {
          font-weight: 500;
          font-size: 30rpx;
          height: 32.5rpx;
          color: #333;
        }

        .new {
          font-weight: 500;
          font-size: 45rpx;
          color: #333;
          line-height: 34rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .old {
          font-weight: 400;
          font-size: 22rpx;
          color: #777777;
          line-height: 34rpx;
          text-align: left;
          font-style: normal;
          text-decoration-line: line-through;
          text-transform: none;
          margin-left: 12rpx;
        }
      }
    }
    .no {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
    }
  }
  .priceType {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #df3033;
    line-height: 36rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-left: 5rpx;
  }
  .main {
    margin-top: 45rpx;

    .list {
      margin-bottom: 35rpx;

      .name {
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
      }

      .value {
        font-weight: 500;
        font-size: 30rpx;
        color: #333333;
        margin-top: 8rpx;
      }
    }

    .list:nth-of-type(1) {
      padding-right: 57rpx;
    }

    .list:nth-of-type(3) {
      padding-left: 57rpx;
    }

    .list:nth-of-type(2) {
      border-left: 1rpx solid #e4e4e4;
      border-right: 1rpx solid #e4e4e4;
      padding-left: 57rpx;
      padding-right: 57rpx;
    }

    .box {
      background: #f7f7f7;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 40rpx 30rpx 0rpx;

      // width: calc(100% - 100rpx);
      .attr {
        padding-bottom: 40rpx;

        // width: calc(100% - 100rpx);
        .name {
          font-weight: 400;
          font-size: 30rpx;
          color: #333333;
          width: 30%;
        }

        .value {
          font-weight: 300;
          font-size: 30rpx;
          color: #333333;
          width: 60%;
        }

        .valueImg {
          width: 60%;
          display: flex;
          flex-wrap: wrap;

          .img {
            width: 36rpx;
            height: 36rpx;
            margin-right: 12rpx;
            margin-bottom: 12rpx;
          }
        }
      }
    }

    .title {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      margin-bottom: 20rpx;
    }

    .item {
      padding-top: 16rpx;
      padding-bottom: 16rpx;
      display: inline-block;
      padding-left: 30rpx;
      padding-right: 30rpx;
      border: 2rpx solid #d9d9d9;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      margin-bottom: 25rpx;
      width: 91%;
      .img {
        width: 72rpx;
        height: 67rpx;
        margin-right: 20rpx;
      }
    }

    .actives {
      width: 91%;
      padding-top: 16rpx;
      padding-bottom: 16rpx;
      display: inline-block;
      padding-left: 30rpx;
      padding-right: 30rpx;
      // background: rgba(213, 169, 105, 0.2);
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      border: 2rpx solid #d5a969;
      font-weight: 400;
      font-size: 28rpx;
      color: #d5a969;
      margin-bottom: 25rpx;

      .img {
        width: 72rpx;
        height: 67rpx;
        margin-right: 20rpx;
      }
    }
  }

  .bottom {
    margin-top: 124rpx;

    .btn {
      width: 50%;
      height: 80rpx;
      background: linear-gradient(113deg, #f2bd6f 0%, #cca05f 100%);
      border-top-right-radius: 20rpx;
      border-bottom-right-radius: 20rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 80rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }

    .btn1 {
      width: 100%;
      height: 80rpx;
      background: linear-gradient(113deg, #f2bd6f 0%, #cca05f 100%);
      border-radius: 20rpx;

      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 80rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }

    .btns {
      width: 50%;
      height: 80rpx;
      background: rgba(213, 169, 105, 0.2);
      border-top-left-radius: 20rpx;
      border-bottom-left-radius: 20rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 30rpx;
      color: #d5a969;
      line-height: 80rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
    .btnNo {
      width: 50%;
      height: 80rpx;
      background: #afafaf;
      border-top-right-radius: 20rpx;
      border-bottom-right-radius: 20rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 80rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }

    .btn1No {
      width: 100%;
      height: 80rpx;
      background: #afafaf;
      border-radius: 20rpx;

      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 80rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }

    .btnsNo {
      width: 50%;
      height: 80rpx;
      background: #c9c9c9;
      border-top-left-radius: 20rpx;
      border-bottom-left-radius: 20rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 30rpx;
      color: #fff;
      line-height: 80rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
}

.popShopTel {
  background-image: url(https://zzt-pub.oss-cn-wuhan-lr.aliyuncs.com/clientImg/telBj%402x.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 100%;

  .left {
    text {
      font-weight: 500;
      font-size: 34rpx;
      color: #333333;
    }
  }

  .main {
    margin-top: 20rpx;

    .tip {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      margin-bottom: 44rpx;
    }
  }
}
</style>
